<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div  id="app" style='width: 100px;color:#f00'>
        <div class="box" a='2' b="3" c>{{msg}}  你好   {{ac}}
            <div>55555</div>
            <my></my>
        </div>
</div>

<div id="app2"></div>
<script src="../dist/vue.js"></script>
    <script>
        Vue.component('my',{
            template:'<div>22</div>',
            beforeCreate(){
                console.log('beforecreate-------组件====挂在生命周期-')
            },
            mounted(){
                console.log('-----组件====挂在生命周期-------mounted')
            }
        })
        let v=new Vue({
            el:'#app',
            data:{
                msg:526,
                ac:[1,[2]],
                b:{
                    bb:'dddd'
                }
            },
            // components:{
            //     my:{
            //         template:'<div>1111</div>'
            //     }
            // },
            beforeCreate(){
                console.log('beforecreate-------父组件*****-')
            },
            mounted(){
                console.log(this.$el,'-----mounted-----父组件*****-',)
            }
        })
        console.log(v,'--------------')
        

        // setTimeout(()=>{
        //     v._data.ac.push(333333)

        //     v._data.ac.push(33311111333)
        //     v._data.ac.push(1111)
        // },2000)
        // console.log(document.querySelector('#app').innerHTML,'0000') 
        // v.$nextTick(()=>{
        //    console.log(document.querySelector('#app').innerHTML,'111') 
        // })
    </script>
    
</body>
</html>